<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-28 00:12:40
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-29 13:54:22
 * @FilePath: \mapview\src\components\tableView\oilWarning2.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class='historical-list'>
    <div class="border--top-left border-view"></div>
    <div class="border--top-right border-view"></div>
    <div class="border--bottom-left border-view"></div>
    <div class="border--bottom-right border-view"></div>
        <div class="table">
            <div class="table-title">
                <div class="table-title-one">车辆类型</div>
                <div class="table-title-three">牌照</div>
                <div class="table-title-four">报警类型</div>
                <div class="table-title-five">报警消息</div>
				<div class="table-title-two">时间</div>
                <div style="width:35px;text-align: center;padding-right: 10px;">操作</div>

            </div>
            <div class="table-list">
                    <div class="historical-list-item" v-for="(item,index) in dataType?lishiDataOne:lishiDataTow" :key="index" >
                    <div class="table-title-one ">{{item.lei}}</div>
                    <div class="table-title-three">{{ item.paizi }}</div>
                    <div class="table-title-four">{{ item.baojing }}</div>
                    <div class="table-title-five">{{ item.xiaoxi }}</div>
                    <div class="table-title-two">{{ item.shijian }}</div>
                    <div  class="check"  style="width:35px;text-align: center;color:#09DEFF;" @click="isShow=!isShow">查看</div>
            </div>
            </div>
        </div>
        <div v-if="isShow" class="dialog-view">
        <div class="dialog-view-content" >
            <!-- 标题 -->
            <div class="dialog-view-title">
                <div class="title">报警信息</div>
                <div class="element" @click="isShow=!isShow">X</div>
            </div>
            <!-- 内容 -->
            <div class="dialog-view-content-box">
                <!-- 左侧内容 -->
                <div class="dialog-view-content-box-left">
                <div class="dialog-view-content-box-left-img">
                    <p class="title">报警图片</p>
                    <img :src="waringImg" />
                </div>
                <div class="dialog-view-content-box-left-text">
                    <p class="title">报警信息</p>
                    <p class="main-text">非危化品车辆占用危化品车辆位置</p>
                </div>
                <div class="dialog-view-content-box-left-text">
                    <p class="title">违规车辆信息</p>
                    <p style="margin-bottom: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;车牌号：辽A230U4</p>
                    <p>入场时间：2024-03-21 11:35:28</p>
                </div>
                </div>
                <!-- 右侧内容 -->
                <div class="dialog-view-content-box-right">
                <div class="dialog-view-content-box-right-text">
                    <p class="title">处理结果</p>
                    <textarea style="width:343.8px; height: 249px; padding: 5px; border: none"></textarea>
                </div>
                <div class="dialog-view-content-box-right-btn">
                    <div class="check" @click="bbb">提交处理</div>
                    <div  class="check" @click="isShow=!isShow">取 消</div>
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            waringImg3:require('../../assets/img/image.png'),
            waringImg:require('../../assets/img/yuan/one.png'),
            waringImg1:require('../../assets/img/yuan/two.png'),
            isShow:false,
            dataType:false,
            lishiDataOne:[
                {
                    'lei':'大货车',
                    'shijian':'2024-03-21 11:35:28',
                    'paizi':'辽A230U4',
                    'baojing':'未处理',
                    'xiaoxi':'非危化品车辆占用危化品车辆位置',
                },
            ],
            lishiDataTow:[
                {
                    'lei':'小客车',
                    'shijian':'2024-03-21 11:36:53',
                    'paizi':'辽A5YH2W',
                    'baojing':'未处理',
                    'xiaoxi':'车辆未按指定位置停放',
                },
                {
                    'lei':'危化品',
                    'shijian':'2024-03-21 11:05:22',
                    'paizi':'豫A2Y234',
                    'baojing':'未处理',
                    'xiaoxi':'危化品车辆未停在指定位置',
                },

            ],
        }
    },
    components: {
        
    },
    created() {
        
    },
    mounted() {
        
    },
    methods: {
        bbb(){
            
            console.info("点击")
            this.lishiDataOne = []
            this.lishiDataTow = [
                {
                    'lei':'小客车',
                    'shijian':'2024-03-21 11:36:53',
                    'paizi':'辽A5YH2W',
                    'baojing':'未处理',
                    'xiaoxi':'车辆未按指定位置停放',
                },
            ]
            if (this.dataType) {
                this.$emit('aaa',0)
            } else {
                this.$emit('aaa',1)
            }
            this.isShow=!this.isShow
        }
    },
};
</script>

<style  scoped>
.historical-list{
    color: #fff;
    position:relative;
    width: 100%;
    border:2px solid #80BCF3;
    border-radius: 10px;
    margin-top: 20px;
    padding:8px;
    height:calc( 200px);
    max-height: 200px;
    /* 创建伪元素来覆盖角落 */

}
.historical-list-title{
    height: 30px;
    border-bottom: 2px solid #fff;

}

.historical-list-item{
    display: flex;
    width: 100%;
    /* justify-content: space-around; */
    height: 40px;
    /*border-bottom: 1px solid #fff;*/
    align-items: center;
    text-align: center;

}

.table-title{
    display: flex;
    /*border-bottom: 1px solid #fff;*/
    height: 40px;
    align-items: center;
	/*background-color: #0091FF;*/
    
}

.table-list{
    height: calc( 100% / 50px);
    height:150px;
    overflow-y: scroll;
    font-size:12px
}
.table-title-one{
    text-align: center;
	flex:1;
    text-align: center;

}

.table-title-two{
    text-align: center;
	flex:2;
    text-align: center;

}

.table-title-three{
	flex:1;
    text-align: center;
font-size:12px;
    text-align: center;
}

.table-title-four{
    text-align: center;
    flex:1;
    text-align: center;

}


.table-title-five{
    text-align: center;
    flex:2.5;
    text-align: center;
    font-size:12px

}


.historical-list-item:nth-child(odd){
	/*background-color: #0091FF;*/
	color:#0091FF;
    color: #fff;
}

.historical-list-item:nth-child(even){
	/*background-color: #09DEFF;*/
	color:#09DEFF;
    color: #fff;
}


.dialog-view {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999999999;
  top:0;
  left:0;
}

.dialog-view-content{
 height: 581px;
    width: 900px;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-image: url('../../assets/img/bg2.svg');
/* 背景图片铺满整个元素 */
  background-size: cover;

  /* 确保背景图片不重复 */
  background-repeat: no-repeat;

  /* 确保背景图片随元素一起缩放 */
  background-attachment: fixed;

  /* 确保背景图片在元素内居中 */
  background-position: center;
}

.dialog-view-title{
  padding: 30px 46px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
}
.dialog-view-title .title{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.element{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.element:hover {
  cursor: pointer;
}
.dialog-view-title div{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.dialog-view-content-box{
  display:flex;
  padding:10px 60px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-img{
  margin-bottom: 20px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-img p{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-img img{
    width:343.8px;
    height: 249px;
}
.dialog-view-content-box-left-text{
  margin-bottom: 20px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-text .title{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.main-text{
  font-size: 16px;
    font-weight: 700;
    color: red;
}
.dialog-view-content-box-right{
  margin-left: 50px;
}
.dialog-view-content-box-right-text .title{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.dialog-view-content-box-right-btn{
  height: 210px;
  text-align: right;
  text-align: center;
    display: flex;
    justify-content: end;
    align-items: self-end;
}
.dialog-view-content-box-right-btn div{
    width: 166px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-left: 10px;

    background-color: #09DEFF;
    border-radius: 5px;
   background-image: url('../../assets/img/btn.png');
/* 背景图片铺满整个元素 */
  background-size: cover;

  /* 确保背景图片不重复 */
  background-repeat: no-repeat;

  /* 确保背景图片随元素一起缩放 */
  background-attachment: fixed;

  /* 确保背景图片在元素内居中 */
  background-position: center;
}
.table-list::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

/* Track */
.table-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* Set the background color of the track */
}

/* Handle */
.table-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1); /* Set the color of the scrollbar handle */
  border-radius: 5px; /* Add rounded corners to the scrollbar handle */
}

.check{
    cursor: pointer;
}
</style>